<template>
    <div>
        <NoAuthPage v-showNoAuth="'D19-1'" :imgBoxStyle="{ height: '40vh', margin: '0 10px 10px' }" />
        <div v-userAuth="'D19-1'">
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <a-button v-userAuth="'D19-3'" type='primary' @click="handleCreate">
                    <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                    {{ $t('创建共享') }}
                </a-button>
                <div style="display: flex;">
                    <div style="width: 120px;margin-top: 4px;">{{ $t('共享名称') }}：</div>
                    <a-input v-model="input" :placeholder="$t('Enter') + $t('共享名称')" />
                    <a-button type='primary' style="margin-left: 8px;" @click="handleSearch">
                        <Iconfont class="icon button-icon-style" type="icon-search16f"></Iconfont>
                        {{ $t('查询') }}
                    </a-button>
                </div>
            </div>

            <a-table style="margin-top:16px" class="bigstyle" rowKey="id" :columns='columns' :loading="loading"
                :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small' :scroll="{ x: 1340 }">
                <template slot="name" slot-scope="name, record">
                    <span style="color: #006DB8;cursor: pointer" @click="handleDetail(record)">{{ name }}</span>
                </template>
                <template slot="share_type" slot-scope="share_type">
                    <span>{{ shareMap.get(share_type) }}</span>
                </template>
                <template slot="access_type" slot-scope="access_type">
                    <span>{{ accessMap.get(access_type) }}</span>
                </template>
                <template slot="share_mode" slot-scope="share_mode">
                    <span>{{ modeMap.get(share_mode) }}</span>
                </template>
                <template slot="status" slot-scope="status, record">
                    <div v-if="status == 0">
                        <span class="dot success"></span>
                        {{ $t('健康') }}
                    </div>
                    <div v-else-if="status == 1">
                        <span class="dot fail"></span>
                        {{ $t('异常') }}
                    </div>
                    <div v-else-if="status == 2">
                        <span class="dot fail"></span>
                        {{ $t('错误') }}
                    </div>
                </template>
                <template slot="operate" slot-scope='text, record'>
                    <div style="display: flex;">
                        <a-tooltip placement='top'>
                            <template slot='title'>
                                <span>{{ $t('Edit') }}</span>
                            </template>
                            <Iconfont v-userAuth="'D19-3'" class="icon table-operation-icon" type="icon-edit16f"
                                @click="handleEdit(record)">
                            </Iconfont>
                        </a-tooltip>
                        <a-tooltip placement='top'>
                            <template slot='title'>
                                <span>{{ $t('Delete') }}</span>
                            </template>
                            <Iconfont v-userAuth="'D19-3'" class="icon table-operation-icon" type="icon-delete16f"
                                @click="deleteCallback(record)">
                            </Iconfont>
                        </a-tooltip>
                    </div>
                </template>
            </a-table>

            <DeleteShare ref="deleteRef" @handle-checked="deleteCallback" />
        </div>
    </div>
</template>

<script>
import DeleteShare from './deleteShare.vue'
import EmptyData from '@/components/common/EmptyData'
import { shareMap, accessMap, modeMap } from "./data";
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    components: { EmptyData, DeleteShare, NoAuthPage },
    data() {
        return {
            loading: false,
            dataList: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '15', '20', '25'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('共享名称'), dataIndex: 'name', key: 'name', width: 160, fixed: 'left', scopedSlots: { customRender: 'name' } },
                { title: this.$t('目录路径'), dataIndex: 'path', key: 'path' },
                { title: this.$t('访问模式'), dataIndex: 'access_type', key: 'access_type', scopedSlots: { customRender: 'access_type' } },
                { title: this.$t('共享方式'), dataIndex: 'share_mode', key: 'share_mode', scopedSlots: { customRender: 'share_mode' } },
                { title: this.$t('共享类型'), dataIndex: 'share_type', scopedSlots: { customRender: 'share_type' } },
                { title: this.$t('共享健康状态'), dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
                { title: this.$t('Operate'), scopedSlots: { customRender: 'operate' }, width: 200, fixed: 'right' }
            ],
            input: '',
            shareMap, accessMap, modeMap,
            deleteItem: {},
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.directory.getShareOverviewApi()
            this.dataList = data.samba_overview
            this.copyList = data.samba_overview
            this.loading = false
        },
        handleCreate() {
            localStorage.setItem('fs_current_tab', "FS_Share");
            this.$router.push({ path: '/createShare' })
        },
        handleEdit(item) {
            localStorage.setItem('fs_current_tab', "FS_Share");
            this.$router.push({
                path: '/modifyShare',
                query: {
                    item: encodeURIComponent(JSON.stringify(item)),
                }
            })
        },
        handleDetail(item) {
            localStorage.setItem('fs_current_tab', "FS_Share");
            this.$router.push({
                path: '/shareDetail',
                query: {
                    item: encodeURIComponent(JSON.stringify(item)),
                }
            })
        },
        handleSearch() {
            this.loading = true
            const list = []; // 用于存放搜索出来数据的新数组
            if (this.input) {
                this.copyList.filter((item) => {
                    if (item.name.indexOf(this.input) !== -1) {
                        list.push(item);
                    }
                });
                this.dataList = list;
            } else {
                this.dataList = this.copyList
            }
            this.loading = false
        },
        async handleDelete(item) {
            this.$refs.deleteRef.isShow = true
            let { name: share_name, id: share_id, path: share_dir, share_mode, access_type } = item
            const params = { share_name, share_id, share_dir, share_mode, access_type }
            this.deleteItem = params
        },
        async deleteCallback(item) {
            // this.$refs.deleteRef.loading = true
            // const params = { ...this.deleteItem }
            // const { data } = await this.$api.directory.deleteShareApi(params)
            // this.model(data.id) //返回模板
            // this.notice(data.id, data.params, data.flag) //通知列表显示
            // if (data.flag == '0') {
            //     this.getList()
            // }
            // this.$refs.deleteRef.loading = false
            // this.$refs.deleteRef.isShow = false
            this.loading = true
            let { name: share_name, id: share_id, path: share_dir, share_mode, access_type } = item
            const params = { share_name, share_id, share_dir, share_mode, access_type }
            let _this = this
            this.$confirm({
                title: this.$t('删除共享'),
                content: this.$t('删除共享名为') + `${share_name}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.directory.deleteShareApi(params)
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        },
    }
}
</script>

<style lang="scss" scoped>
.success {
    background-color: #129a9a;
}

.fail {
    background-color: #b62832
}
</style>